<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //ajax出现前的网页  每一次网页内容更新，都是整个网页的更新
    //ajax出现后的网页  每一次网页更新都是局部更新
    //ajax是用来在网页中发起网络请求的，每一次发请求都会携带数据给另一台电脑（服务器），服务器也会返回数据给本机
    //ajax请求结果： 200——成功   401——登录过期身份验证失败  404——访问路径有误（资源路径有误） 500——服务器内部错误

    //发起一个ajax请求分4步
    //1.创建一个xhr对象
    var xhr = new XMLHttpRequest()

    console.log(xhr.readyState);//0
    //2.配置xhr对象
    //参数一：method请求方式 ，get/post/delete/put
    //参数二：url 请求地址(资源路径)
    xhr.open('get', './data.json')

    console.log(xhr.readyState);//1
    //3.设置回调函数，用来接收返回的响应数据
    //只要readyState的状态值发生改变，回调函数就会执行
    //0 请求对象已创建 但是未初始化
    //1 请求已配置 但是未发送
    //2 请求已发送 但是服务器还未返回数据
    //3 请求已发送 服务器已经在返回数据，但是数据可能没有全部返回
    //4 请求已发送 数据已全部返回
    xhr.onreadystatechange = function () {
        // console.log(xhr.readyState);//2 3 4
        if (xhr.readyState == 4) {
            
            console.log('请求到了数据',JSON.parse(xhr.responseText));
        }


    }
    //4.发送请求
    xhr.send()

</script>